<template>
  <div class="empty_shopcart">
    <el-row>
      <el-col :span="10" :offset="2">
        <div class="shopcart_item"></div>
      </el-col>
      <el-col :span="10">
        <div class="top_item">{{componentNameType}}</div>
        <div class="bottom_item">
          <el-button type="warning" @click="loginClick" v-if="!isLogined">立即登录</el-button>
          <el-button type="warning" @click="shopClick">马上去购物</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="bottom"> <bottom-bar></bottom-bar></div>

  </div>
</template>

<script>
  import BottomBar from "../bottomBar/BottomBar";
  export default {
    name: "EmptyShopcart",
    props:{
      componentNameType: '',
    },
    components:{
      BottomBar
    },
    methods:{
      loginClick(){
        this.$router.push('/login');
      },
      shopClick(){
        this.$router.push('/index');
      }
    },
    computed:{
      isLogined(){
        if(this.$store.state.userId == null || this.$store.state.userId === ''){
          return false;
        }else{
          return true;
        }
      }
    }
  }
</script>

<style scoped>
  .empty_shopcart{
    background-color: #F5F5F5;
  }
  .empty_shopcart .shopcart_item{
    width: 100%;
    height: 400px;
    background: url("https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/cart/cart-empty.png") no-repeat 124px 0;
  }
  .top_item{
    font-size: 40px;
    margin-top: 100px;
  }

  .bottom_item{
   margin-top: 20px;
  }

  .bottom{
    font-size: 14px;
  }
</style>
